/**
 * 题1.vue-router 懒加载
 * 方案一：使用箭头函数 + import 动态加载
*/
const router = new VueRouter({
  routes: [{ 
    path: '/list',
    component: () => import('@/components/list.vue')
  }]
})
// 方案二：使用箭头函数 + require 动态加载
const router = new VueRouter({
  routes: [{
    path: '/list',
    component: (resolve) => require(['@/components/list'], resolve)
  }]
})
// 方案三：使用webpack的require.ensure技术，这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件
const router = new VueRouter({
  routes: [{
    path: '/list',
    component: (resolve) => require.ensure([], () => resolve(require('@/components/list')))
  }]
})

// 题2：Vue-Router 钩子函数 beforeEach 用来判断是否登录，没登录跳转到登录页
router.beforeEach((to, from, next) => {  
  let token = $cookie.get('token');  // 判断是否登录的存储信息(cookie 存放 token)
  if (!token) {   
    if (to.path == '/') { 
      // 如果是登录页面路径，就直接next()，直接给一个出口   
      next();
    } else { 
      // 不然就跳转到登录      
      Message.warning("请重新登录！");     
      window.location.href = Vue.prototype.$loginUrl;    
    }
  } else {    
    next();
  }
})
// afterEach 跳转之后滚动条回到顶部
router.afterEach((to, from) => window.scrollTo(0, 0))

// 单个路由独享钩子
export default [    
  {        
    path: '/',
    name: 'login',
    component: login,
    beforeEnter: (to, from, next) => {
      console.log('即将进入登录页面')
      next()
    }    
  }
]

/**
 * 组件内部的钩子
 * beforeRouteUpdate：进入组件前触发，此时组件内还访问不到 this，因为这个守卫执行前实例还没创建，要传一个回调给 next 访问
 * beforeRouteUpdate∶ 当前地址改变并且该组件被复用时触发，常用于带有动态参数的路径foo/:id，在 /foo/1 和 /foo/2 之间跳转时触发
 * beforeRouteLeave∶ 离开组件被调用
 */
// beforeRouteEnter(to, from, next) {
//   next(target => {
//     if (from.path == '/classProcess') {
//       target.isFromProcess = true
//     }
//   })
// }